<template>
  <div id="addCombo">

    <el-card>
      <div>
        <el-descriptions title="套餐组信息" :colon="false" label-class-name="dialogLabel">
          <el-descriptions-item v-for="(item, index) in comboGroupItem" :key="index" :label="item.label">{{groupData[item.prop] }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>

    <el-card>
      <el-form :model="forms" ref="addRef" label-position="top">
        <div class="form-item" v-for="(item, index) in forms.list" :key="index">
          <el-form-item label="套餐类型" :prop="'list[' + index + '].combo_type'" :rules="addRules.combo_type">
            <el-select v-model="item.combo_type" placeholder="请选择套餐类型" @change="item.package_type = ''">
              <el-option v-for="(item, index) in optionsGroup[$api.Enum.DicTypeComboType]" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="包类型" :prop="'list[' + index + '].package_type'" :rules="addRules.package_type">
            <el-select v-model="item.package_type" placeholder="请选择包类型" :disabled="item.combo_type == ''">
              <div v-for="(optionItem, index) in optionsGroup[$api.Enum.DicTypeComboBagType]" :key="index">
                <el-option v-if="optionItem.extend.combo_type === item.combo_type" :label="optionItem.name" :value="optionItem.id"></el-option>
              </div>
            </el-select>
          </el-form-item>

          <el-form-item label="套餐名称" :prop="'list[' + index + '].name'" :rules="addRules.name">
            <el-input v-model="item.name" placeholder>
              <span slot="suffix"></span>
            </el-input>
          </el-form-item>

          <el-form-item label="编号" :prop="'list[' + index + '].code'" :rules="addRules.code">
            <el-input v-model="item.code">
              <span slot="suffix"></span>
            </el-input>
          </el-form-item>

          <el-form-item label="流量" :prop="'list[' + index + '].flow'" :rules="addRules.flow">
            <el-input v-model="item.flow" :disabled="item.package_type === 4 || item.package_type === 5">
              <span slot="suffix">MB</span>
            </el-input>
          </el-form-item>

          <el-form-item label="语音" :prop="'list[' + index + '].voice'" :rules="addRules.voice">
            <el-input v-model="item.voice" :disabled="item.package_type === 1 || item.package_type === 5">
              <span slot="suffix">分钟</span>
            </el-input>
          </el-form-item>

          <el-form-item label="短信" :prop="'list[' + index + '].sms'" :rules="addRules.sms">
            <el-input v-model="item.sms" :disabled="item.package_type === 4 || item.package_type === 1">
              <span slot="suffix">条</span>
            </el-input>
          </el-form-item>

          <el-form-item label="参考流量" :prop="'list[' + index + '].refer_flow'" :rules="addRules.refer_flow">
            <el-input v-model="item.refer_flow" :disabled="item.package_type === 4 || item.package_type === 5">
              <span slot="suffix">MB</span>
            </el-input>
          </el-form-item>

          <el-form-item label="有效期" :prop="'list[' + index + '].effect_month'" :rules="addRules.effect_month">
            <el-input v-model="item.effect_month" :disabled="groupData.operating_mode == 2">
              <span slot="suffix">月</span>
            </el-input>
          </el-form-item>

          <el-form-item label="成本价" :prop="'list[' + index + '].cost_price'" v-if="groupData.operating_mode != 2">
            <el-input v-model="item.cost_price">
              <span slot="suffix">元</span>
            </el-input>
          </el-form-item>

          <el-form-item class="moveButton">
            <el-button type="danger" @click="moveForm(index)">删除</el-button>
          </el-form-item>
        </div>
        <div class="submitButton">
          <el-form-item>
            <el-button type="primary" @click="forms.list.push({package_type: '', combo_type: '', effect_month: 1})">新增套餐</el-button>
            <el-button type="success" :disabled="forms.list == ''" @click="submitForm">确定添加</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-card>
  </div>
</template> 

<script>
export default {
  props:{
    group_id: Number,
  },
  data() {
    return {
      forms: {
        group_id: '', //所属套餐组编号
        list: [{
          package_type: '',
          combo_type: '',
          effect_month: 1
        }]
      },
      optionsGroup: [],
      addRules: {
        group_id: {
          required: true,
          message: "请输入套餐组所属编号",
          trigger: "blur"
        },
        package_type: {
          required: true,
          message: "请输入包类型",
          trigger: "blur"
        },
        combo_type: {
          required: true,
          message: "请输入套餐类型",
          trigger: "blur"
        },
        name: { required: true, message: "请输入套餐名称", trigger: "blur" },
        // code: { required: true, message: "请输入编号", trigger: "blur" },
        // flow: { required: true, message: "请输入流量", trigger: "blur" },
        // voice: { required: true, message: "请输入语音", trigger: "blur" },
        // sms: { required: true, message: "请输入短信", trigger: "blur" },
        // refer_flow: {required: true, message: "请输入参考流量", trigger: "blur"},
        // effect_month: {
        //   required: true,
        //   message: "请输入有效期",
        //   trigger: "blur"
        // },
      },
      groupData: {},
      comboGroupItem: [
        { label: '组名称', prop: 'title' },
        { label: '所属应用商', prop: 'agent_app_name' },
        { label: '主套餐类型', prop: 'main_package_type_name' },
        { label: '销售模式', prop: 'sale_mode_name' },
        { label: '周期类型', prop: 'cycle_mode_name' },
        { label: '流量类型', prop: 'flow_type_name' },
        { label: '流量倍率', prop: 'flow_ratio' },
        { label: '语音倍率', prop: 'voice_ratio' },
        { label: '运营模式', prop: 'operating_mode_name' },
      ]
    };
  },

  mounted() {
    if (!this.group_id){
      console.log(this.$route)
      this.group_id = this.$route.query.group_id
    }
    if (!this.group_id){
      this.group_id = window.sessionStorage.getItem("addComboId");
    }
    console.log("group_id",this.group_id)
    this.$api.foundation.dicListExtendCache(
      [
        this.$api.Enum.DicTypeComboType,
        this.$api.Enum.DicTypeComboBagType,
      ],
      {},
      res => {
        this.optionsGroup = res;
      }
    )
    this.getGroupDetail()
  },

  methods: {
    getGroupDetail() {
      this.$api.combo.groupDetail({id: this.group_id}, res => {
        if (!res.status) {
          return this.$message.error(res.message);
        }
        this.forms.group_id = res.data.id
        this.groupData = res.data
      });
    },
    moveForm(index) {
      this.forms.list.splice(index, 1);
    },
    submitForm() {
      this.$refs.addRef.validate(valid => {
        if (!valid) {
          return this.$message.error("请完善表单内容!");
        }
        let body = this.$tool.copyJSON(this.forms)
        console.log("submit data", body)
        body.group_id = Number(body.group_id)
        body.list.forEach(element => {
          element.flow = Number(element.flow);
          element.voice = Number(element.voice);
          element.sms = Number(element.sms);
          element.refer_flow = Number(element.refer_flow);
          element.effect_month = Number(element.effect_month);
          element.cost_price = Number(element.cost_price);
          element.package_type = Number(element.package_type);
          element.combo_type = Number(element.combo_type);
          if (!element.effect_month){
            element.effect_month = 1
          }
        });

        this.$api.combo.comboAddBatch(body, res => {
          if (!res.status) {
            return this.$message.error(res.message);
          }
          this.$message.success("添加成功");
          this.$refs.addRef.resetFields();
          this.forms.list = [{package_type: '', combo_type: ''}]
          this.$router.push('comboGroup#id='+this.group_id)
        });
      });
    }
  }
};
</script>
<style lang="less">
#addCombo {
  .label {
    width: 120px;
    display: inline-block;
    text-align-last: justify;
    font-weight: bold;
  }
}
</style>
<style lang="less" scoped>
.form-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.form-item {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  margin-top: 20px;

  .el-form-item {
    width: 25%;
    padding: 0 10px;
  }
  .moveButton {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin: 10px 0;
  }
}

.submitButton {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>
